<!-- 任务发布 -->
<template>
  <div class="task-send">
    <!-- 顶部标题栏组件 -->
    <top-header></top-header>

    <!-- 任务发布表单 -->
    <van-form @submit="onSubmit">
      <van-field
        readonly
        clickable
        :value="custText"
        label="客户单位:"
        name="custText"
        placeholder="点击选择客户单位"
        @click="openCust" />
      <van-field
        readonly
        clickable
        :value="pactText"
        label="合同名称:"
        name="pactText"
        placeholder="点击选择合同名称"
        @click="openPact" />
      <van-field
        readonly
        clickable
        :value="svr"
        label="分配人员:"
        name="svr"
        placeholder="点击选择分配人员"
        @click="openPeo('type1')" />
      <van-field
        v-model="pName"
        label="联系人:"
        name="pName">
        <template #button>
          <van-icon name="contact" color="burlywood" @click="openPeo('type2')" />
        </template>
      </van-field>
      <van-field v-model="phone" type="tel" label="联系电话:" name="phone" />
      <van-field v-model="address" label="客户地址:" name="address"></van-field>
      <van-field
        readonly
        clickable
        name="tasksAddress"
        :value="tasksAddress"
        label="办公地点:"
        placeholder="点击选择办公地点"
        @click="taskPicker = true"></van-field>
      <van-field v-model="version" label="软件版本:" name="version" />
      <van-field
        readonly
        clickable
        name="priority"
        :value="priority"
        label="优先级:"
        placeholder="点击选择优先级"
        @click="showPicker = true"
      />
      <van-field name="cblType" label="服务类型:" :max="2">
        <template #input>
          <van-checkbox-group v-model="cblType">
            <van-checkbox
              v-for="item in serviceType"
              :key="item.typeId"
              :name="item.typeId"
              checked-color="burlywood"
              :style="{ marginBottom: '4px' }">{{ item.typeName }}</van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="sDate"
        :value="sDate"
        label="上门日期"
        placeholder="点击选择上门日期"
        @click="showCalendar = true"
      />
      <van-field
        readonly
        clickable
        name="sTime"
        :value="sTime"
        label="上门时间"
        placeholder="点击选择上门时间"
        @click="showTimePicker = true"
      />
      <van-field v-model="lengthTime" type="digit" label="预算时长:" name="lengthTime" />
      <van-field v-model="deadline" type="digit" label="时限:" name="deadline" />
      <van-field label="难度系数:" name="degreeDifficulty">
        <template #input>
          <van-stepper v-model="degreeDifficulty" theme="round" button-size="22" max="15" />
        </template>
      </van-field>
      <van-field v-model="info" label="服务内容:" name="info" type="textarea" maxlength="50" show-word-limit />
      <div class="submit-btn">
        <van-button type="info" size="small" block color="burlywood">任务发布</van-button>
      </div>
    </van-form>

    <!-- 路由导航组件 -->
    <nav-bar></nav-bar>

    <!-- 合同名称选择器 -->
    <van-popup v-model="pactShowPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="pactColumns"
        @confirm="pactOnConfirm"
        @cancel="pactShowPicker = false"
        v-if="pactColumns.length > 0"
      />
      <van-empty description="暂无数据" v-else />
    </van-popup>
    <!-- 联系人或分配人员选择器 -->
    <van-popup v-model="peoShowPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="peoColumns"
        @confirm="peoOnConfirm"
        @cancel="peoShowPicker = false"
        v-if="peoColumns.length > 0"
      />
      <van-empty description="暂无数据" v-else />
    </van-popup>
    <!-- 办公地点选择器 -->
    <van-popup v-model="taskPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="taskColumns"
        @confirm="taskOnConfirm"
        @cancel="taskPicker = false"
      />
    </van-popup>
    <!-- 优先级选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- 日期选择器 -->
    <van-calendar v-model="showCalendar" @confirm="selectDate" color="burlywood" />
    <!-- 时间选择器 -->
    <van-popup v-model="showTimePicker" position="bottom">
      <van-datetime-picker
        type="time"
        @confirm="timeOnConfirm"
        @cancel="showTimePicker = false"
      />
    </van-popup>
    <!-- 客户单位选择 -->
    <van-popup v-model="showCust" position="bottom" :style="{ height: '80%' }">
      <!-- 客户单位搜索 -->
      <van-search
        v-model="searchContent"
        placeholder="请输入搜索关键词"
        input-align="center"
        @input="onInput"
      />
      <!-- 客户单位数据列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in custList"
          :key="item.Cust_NO"
          :title="item.Cust_name"
          :value="item.Cust_NO"
          @click="selectCust(item)"
        />
      </van-list>
    </van-popup>
  </div>
</template>

<script>
import { TopHeader, NavBar } from '@/components'
import { getCustList, getServiceType, getPeoList, getPactList, addMySer } from '@/request/api'
import dayjs from 'dayjs'
export default {
  name: 'Task',
  components: {
    TopHeader,
    NavBar
  },
  data () {
    return {
      custText: '', // 客户单位名称
      pactText: '', // 合同名称
      svr: '', // 分配人员
      pName: '', // 联系人
      phone: '', // 联系电话
      address: '', // 客户地址
      tasksAddress: '', // 办公地点
      version: '', // 软件版本
      priority: '', // 优先级
      cblType: [], // 服务类型
      sDate: '', // 日期
      sTime: '', // 时间
      lengthTime: '', // 预算时长
      deadline: '', // 时限
      degreeDifficulty: 1, // 难度系数
      info: '', // 服务内容
      pactShowPicker: false, // 合同名称选择器显示状态
      pactColumns: [], // 合同名称选择器数据
      peoShowPicker: false, // 联系人选择器显示状态
      peoColumns: [], // 联系人选择器数据
      columns: ['紧急', '重要', '一般', '后置', '待定'], // 优先级选择器数据
      taskColumns: [ '客户现场', '办公室' ],
      showPicker: false, // 优先级选择器显示状态
      taskPicker: false, // 办公地点选择器显示状态
      serviceType: [], // 服务类型数据
      showCust: false, // 客户单位选择框显示状态
      searchContent: '', // 客户单位搜索关键词
      custList: [], // 客户单位数据
      custCount: 0, // 客户单位数据总量
      pageIndex: 0,
      loading: false, // 客户单位加载loading
      finished: false, // 客户单位加载完成状态
      custId: '', // 客户单位id
      pactId: '', // 合同id
      pid: '', // 联系人id
      svrMan: '', // 分配人员id
      peoType: '',
      showCalendar: false, // 日期选择器显示状态
      showTimePicker: false // 时间选择器显示状态
    }
  },
  created () {
    // 服务类型数据获取
    getServiceType().then(res => {
      console.log(res)
      if (res.msg === '数据加载成功') {
        this.serviceType = res.result.serviceType
      }
    })
  },
  methods: {
    // 客户单位点击选择
    openCust () {
      this.showCust = true
      this.searchContent = ''
      this.pageIndex = 0
      this.finished = false
      const param = { 'name': this.searchContent, 'page': this.pageIndex, 'pageCount': 10 }
      getCustList(param).then(res => {
        this.custList = res.result.cust
        this.custCount = res.result.count
      })
      this.onLoad()
    },
    // 客户单位数据异步加载
    onLoad () {
      console.log('数据刷新')
      // 异步更新数据
      setTimeout(() => {
        this.pageIndex++
        const param = { 'name': this.searchContent, 'page': this.pageIndex, 'pageCount': 10 }
        getCustList(param).then(res => {
          this.custList = [...this.custList, ...res.result.cust]
          this.custCount = res.result.count
        })
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (10 * (this.pageIndex + 1) >= this.custCount) {
          this.finished = true
        }
      }, 1000)
    },
    // 客户单位搜索
    onInput (value) {
      console.log(value)
      this.searchContent = value
      this.custList = []
      this.pageIndex = 0
      this.finished = false
      const param = { 'name': this.searchContent, 'page': this.pageIndex, 'pageCount': 10 }
      getCustList(param).then(res => {
        this.custList = res.result.cust
        this.custCount = res.result.count
      })
      this.onLoad()
    },
    // 选择客户单位
    selectCust (value) {
      console.log(value)
      this.custText = value.Cust_name
      this.custId = value.Cust_id
      this.address = value.Cust_address
      this.showCust = false
      // 选择不同客户单位，清空合同名称和联系人
      this.pactText = ''
      this.pName = ''
    },
    // 合同名称选择
    openPact () {
      if (this.custId) {
        this.pactColumns = []
        this.pactShowPicker = true
        const param = { 'cid': this.custId }
        getPactList(param).then(res => {
          console.log(res)
          if (res.msg === '数据加载成功') {
            this.pactColumns = res.result.pact.map(item => {
              return {
                text: item.Pact_Name,
                value: item.pact_Id
              }
            })
          }
        })
      } else {
        this.$toast('请先选择客户单位')
      }
    },
    // 联系人选择
    openPeo (type) {
      this.peoType = type
      if (this.custId) {
        if (this.peoType === 'type1') {
          this.peoColumns = []
          this.peoShowPicker = true
          const param = { 'stype': 'skills', page: 0, pageCount: 100 }
          getPeoList(param).then(res => {
            console.log(res)
            if (res.msg === '数据加载成功') {
              this.peoColumns = res.result.peo.map(item => {
                return {
                  text: item.Source_Name,
                  value: item.Source_Id
                }
              })
            }
          })
        } else if (this.peoType === 'type2') {
          this.peoColumns = []
          this.peoShowPicker = true
          const param = { 'stype': 'out', 'cid': this.custId }
          getPeoList(param).then(res => {
            console.log(res)
            if (res.msg === '数据加载成功') {
              this.peoColumns = res.result.peo.map(item => {
                return {
                  text: item.Source_Name,
                  value: item.Source_Id,
                  phone: item.Phone
                }
              })
            }
          })
        }
      } else {
        this.$toast('请先选择客户单位')
      }
    },
    // 合同名称选择器
    pactOnConfirm (value) {
      if (value) {
        this.pactText = value.text
        this.pactId = value.value
        this.pactShowPicker = false
      } else {
        this.pactShowPicker = false
      }
    },
    // 联系人选择器
    peoOnConfirm (value) {
      if (value) {
        if (this.peoType === 'type1') {
          this.svr = value.text
          this.svrMan = value.value
          this.peoShowPicker = false
        } else if (this.peoType === 'type2') {
          this.pName = value.text
          this.pid = value.value
          this.phone = value.phone
          this.peoShowPicker = false
        }
      } else {
        this.peoShowPicker = false
      }
    },
    // 客户地址选择器
    taskOnConfirm (value) {
      if (value) {
        this.tasksAddress = value
        this.taskPicker = false
      }
    },
    // 优先级选择器
    onConfirm (value) {
      if (value) {
        this.priority = value
        this.showPicker = false
      } else {
        this.showPicker = false
      }
    },
    // 日期选择器
    selectDate (date) {
      this.showCalendar = false
      this.sDate = dayjs(date).format('YYYY-MM-DD')
      console.log(this.sDate)
    },
    // 时间选择器
    timeOnConfirm (time) {
      this.showTimePicker = false
      this.sTime = time
    },
    // 任务发布提交
    onSubmit (values) {
      if (this.custId) {
        console.log(values)
        if (values.tasksAddress && values.address && values.sDate && values.sTime && values.phone && values.pName && values.lengthTime && values.info && values.cblType.length > 0) {
          this.$dialog.confirm({
            title: '提示',
            message: '您确定要发布此条任务吗?',
            confirmButtonColor: 'burlywood'
          }).then(() => {
            values.staffId = sessionStorage.getItem('userId')
            values.custId = this.custId
            values.pactId = this.pactId
            values.pid = this.pid
            values.svrMan = this.svrMan
            values.type = 'Add'
            delete values.custText
            delete values.pactText
            delete values.svr
            console.log('submit', values)
            addMySer(values).then(res => {
              console.log(res)
              if (res.msg === '添加成功') {
                this.$toast.success('发布成功')
                setTimeout(() => {
                  if (this.svrMan) {
                    this.$router.push('/myTask')
                  } else {
                    this.$router.push('/taskAssign')
                  }
                }, 2000)
              } else {
                this.$toast.fail('发布失败')
              }
            })
          }).catch(() => {})
        } else {
          this.$dialog.alert({
            message: '地址,日期,时间,联系人,联系电话,办公地点,预算时长,服务内容必填',
            confirmButtonColor: 'burlywood'
          })
        }
      } else {
        this.$dialog.alert({
          message: '客户单位必选',
          confirmButtonColor: 'burlywood'
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.task-send {
  width: 100%;
  height: 100%;
  .van-form {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 2.7rem);
    /deep/ .van-cell {
      .van-stepper--round {
        .van-stepper__minus {
          color: burlywood;
          border-color: burlywood;
        }
        .van-stepper__plus {
          background-color: burlywood;
        }
      }
    }
  }
  .submit-btn {
    margin: .4rem;
  }
  .van-popup {
    display: flex;
    flex-direction: column;
    .van-search {
      border: 1px solid #ebedf0;
    }
    .van-list {
      flex: 1;
      overflow: auto;
      .van-cell {
        .van-cell__title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
